<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../00-source/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            position: absolute
        }
    </style>
</head>

<body>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <br>
    <button id="slideDown">卷帘下来</button>
    <button id="slideUp">卷帘上去</button>
    <br>
    <button id="fadeIn">淡入</button>
    <button id="fadeOut">淡出</button>
    <br>
    <button id="zonghe">综合动画</button>
    <br>
    <button id="stop">停止</button>
    <div id="box"></div>
    <script>
        // 基本动画
        /*
            以下所有函数都有三个参数(选填,甚至可以一个都不填):
                1.动画执行时间: 1000为1s
                2.动画效果: linear、
                3.动画执行完成后的回调函数

            show()  hide()  
            toggle() 原本是显示则隐藏，反之显示

            以卷轴的形式播放显示隐藏的动画
            slideDown()  slideUp()
            slideToggle() 啥意思不用我说了吧

            以淡入淡出的形式播放显示隐藏的动画
            fadeIn()  fadeOut()
            fadeToggle()

            fadeTo():由于淡入淡出是利用了透明度这个css样式，所以我们可以fade提供了一个fadeTo方法，可以相比于前面的多一个参数，也就是透明度, 取值范围0-1
        */
        $('#show').click(() => {
            $('#box').show(500, 'linear')
        })

        $('#hide').click(() => {
            $('#box').hide(500, 'linear')
        })

        $('#slideDown').click(() => {
            $('#box').slideDown(500, 'linear')
        })

        $('#slideUp').click(() => {
            $('#box').slideUp(500, 'linear')
        })

        $('#fadeIn').click(() => {
            $('#box').fadeIn(500, 'linear')
        })

        $('#fadeOut').click(() => {
            $('#box').fadeOut(500, 'linear')
        })

        // 综合动画
        /*
            animate() 接收三个参数
                第一个参数: 你想变成啥样, 用对象包裹起来，注意驼峰写法
                第二个参数: 动画时长
                第三个参数: 动画速度
                第四个参数: 动画播放完毕后的回调

            注意，不是所有的属性都能被动画过渡播放出来。
                1.颜色的变化
                2.transform
                3.没有过程的显示隐藏比如display:none -> display:block
        */
        $('#zonghe').click(function () {
            $('#box').animate({
                left: '200px',
                right: '200px',
                borderRadius: '50px'
            }, 1000, 'linear', () => {
                console.log('播放完毕');
            })
        })

        // stop()用于停止动画
        $('#stop').click(() => {
            $('#box').stop()
        })

        // finish() 运动到哪，立即到完成的位置
    </script>
</body>

</html>